DiscoverFront-End Developer CastWeb Application Makeover: How to use custom fonts and @font-face | Episode 6
Web Application Makeover: How to use custom fonts and @font-face | Episode 6

Web Application Makeover: How to use custom fonts and @font-face | Episode 6

Update: 2014-08-25
Share

Description

Chris Coyier and I discuss how to use custom fonts and @font-face to makeover your web application or site.  Chris and I also discuss "What is a front-end developer" and contrast his project codepen.io with jsfiddle.net and jsbin.com.


Chris has worked for large scale web apps like SurveyMonkey and design focused startups like Wufoo. He co-founded CodePen, an online playground for HTML, CSS, and JavaScript. Chris also has a weekly podcast about all things web with Dave Rupert called ShopTalk. The man knows a few things about the web!


To subscribe to the podcast, please use the links below:


Click Here to Subscribe via iTunes

Click Here to Subscribe via RSS (non-iTunes feed)

Show Notes:

Resources


Chris's CSS blog CSS Tricks

Codepen

Adobe TypeKit

Font Squirrel

Font Squirrel's Font Generator


Also mentioned Sifr


Full Transcript

Craig McKeachie: [0:00 ] On this episode, Chris Coyier discusses how to use custom fonts, and @font-face to makeover your web application. This is Front End Developer Cast, Episode 6.


[0:09 ] [music]


Craig: [0:20 ] Welcome to The Front End Developer Cast, the podcast that helps developers be awesome at building ambitious web applications, whether you're a JavaScript ninja, or you're just getting started. I'm your host, Craig McKeachie.


[0:33 ] Hi, everyone. My interview today is with Chris Coyier of csstricks.com, and the creator of codepen.io. Let's get right into the interview.


[0:42 ] Hi, today, I'm really lucky to have Chris Coyier, of csstricks and codepen fame on the podcast. We can talk a little bit more about his background. It's somewhat unclear to me, I'd be interested for Chris to fill in some of the details. I know you used to work at SurveyMonkey, and then SurveyMonkey was bought by Wufoo, if you wouldn't mind, Chris, welcome to the podcast and give us a little history about yourself.


Chris Coyier: [1:05 ] Thanks for having me. It's awesome to be on. It actually worked in that reverse order.


[1:10 ] It was Wufoo that got bought by SurveyMonkey. That's the first time that's happened. I feel like most people...I can grab somebody off the street usually that's heard of SurveyMonkey, because I feel like they've been around forever, and they have market saturation, and teachers use it and stuff like that, whereas, Wufoo is a little more niched to the industry.


Craig: [1:32 ] It makes sense that SurveyMonkey would be the acquirer, right? Yes, definitely.


Chris: [1:36 ] Yes. My history is tremendously boring. I don't know, there's not much that can be gleaned out of it! I hate to start on a bummer note like that, but it's like I'm just normal kid who went to normal college in the Midwest in the US, and became a font-end developer.


Craig: [1:55 ] It's CSS Tricks, I saw you're listed as an author for that. Did that start as your blog and is now owned by Treehouse? Can you give me a little [inaudible 0:02:04 ] ? People are curious about that a little bit.


Chris: [2:03 ] Sure. That's probably what most people know me from in this industry, because it's the thing I've been doing the longest.


[2:11 ] It tends to be one of those sites that people tell me it shows up in search results a lot when you Google a CSS problem or something like that. Google has been good to me in that way. That's a blog that I started in 2007, it's a little over seven-years- old now.


[2:30 ] There's screencasts on it and a blog post, and a section I call Snippets, where I have little miniature chunks of code that have less explanation attached to them, and there's a community forums there that's pretty active, and stuff, it's this whole site about all things front-end web design. It's called CSS Tricks, which is a terribly hokey name, but it has brand power over the thing.


[2:54 ] It's not owned by Treehouse. Treehouse is a sponsor of mine and I have an interactive ...

Comments 
00:00
00:00
x

0.5x

0.8x

1.0x

1.25x

1.5x

2.0x

3.0x

Sleep Timer

Off

End of Episode

5 Minutes

10 Minutes

15 Minutes

30 Minutes

45 Minutes

60 Minutes

120 Minutes

Web Application Makeover: How to use custom fonts and @font-face | Episode 6

Web Application Makeover: How to use custom fonts and @font-face | Episode 6

Craig McKeachie